.music {
  width: 200px;
}
.music .one {
  height: 18px;
  transform: translate(0px, -50%);
}

.music .two {
  height: 53px;
  transform: translate(20px, -50%);
}

.music .three {
  height: 36px;
  transform: translate(40px, -50%);
}

.music .four {
  height: 70px;
  transform: translate(50px, -50%);
}

.music .five {
  height: 30px;
  transform: translate(70px, -50%);

}

.music .six {
  height: 40px;
  transform: translate(90px, -50%);
}

.music .seven {
  height: 50px;
  transform: translate(110px, -50%);
}

.item {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);

  width: 5px;
  border-radius: 6px;
  background-color: #3372e2;
}

@keyframes radius-animation {
  100% {
    height: 10px;
    /* border-radius: 50%; */
    filter: contrast(2);
  }
}

.music .one {
  animation: radius-animation .3s ease;
}

.music .two {
  animation: radius-animation .6s ease;
}

.music .three {
  animation: radius-animation .57s ease;
}

.music .four {
  animation: radius-animation .52s ease;
}

.music .five {
  animation: radius-animation .4s ease;
}

.music .six {
  animation: radius-animation .3s ease;
}

.music .seven {
  animation: radius-animation .7s ease;
}

.music .item {
  line-height: 100px;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
}